<template>
  <div style="height: 99.9%">
    <!-- 面包屑导航 -->
    <breadcrumb></breadcrumb>
    <div class="DetailsMain">
      <div class="header">
        <div class="stateBox" v-show="DetailsData.certStatus == 1">
          <div class="circle">
            <i class="iconfontcolor icon-dairenzheng iconState"></i>
          </div>
          <div class="titleBox">
            <div class="title">待认证</div>
            <div class="text">认证类型：车辆认证</div>
          </div>
        </div>
        <div class="stateBox" v-show="DetailsData.certStatus == 3">
          <div class="circle">
            <i class="iconfontcolor icon-butongguo iconState"></i>
          </div>
          <div class="titleBox">
            <div class="title">不通过</div>
            <div class="text">认证类型：车辆认证</div>
          </div>
        </div>

        <div class="button_group" v-if="DetailsData.certStatus == 1">
          <button class="notAdopt_btn" @click="openMessageBox(false)">
            不通过
          </button>
          <button class="adopt_btn" @click="openMessageBox(true)">通过</button>
        </div>
      </div>
      <!-- 车辆信息 -->
      <div class="carInfoBox">
        <div class="head">
          <i class="iconfontcolor icon-xinxi"></i>
          <h3>车辆信息</h3>
        </div>
        <!-- 信息描述 -->
        <div class="formBox">
          <el-descriptions
            class="descriptions"
            :border="true"
            size="small"
            :labelStyle="{
              color: '#262626',
              fontSize: '12px',
              fontWeight: 'bold',
              backgroundColor: '#DDDDDD',
            }"
          >
            <el-descriptions-item labelClassName="label" label="车辆编号">{{
              DetailsData.vehicleId
            }}</el-descriptions-item>
            <el-descriptions-item label="车牌号">{{
              DetailsData.numberplate
            }}</el-descriptions-item>
            <el-descriptions-item label="车辆类型">{{
              DetailsData.vehicleType
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌型号">{{
              DetailsData.brandModel
            }}</el-descriptions-item>
            <el-descriptions-item label="规格">
              <div>
                {{ DetailsData.specification }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="加入时间">{{
              DetailsData.createTime
            }}</el-descriptions-item>
            <el-descriptions-item
              label="参数"
              labelClassName="paramsLaber"
              contentClassName="paramsCotent"
              :span="3"
              >厢长：{{ DetailsData.carriageLength }}米，载方：{{
                DetailsData.loadSide
              }}方，载重：{{ DetailsData.loadCapacity }}吨，车高：{{
                DetailsData.vehicleHeight
              }}米
              #4.2（包含）米长以上需提供道路运输许可证</el-descriptions-item
            >
            <el-descriptions-item label="图片资料" :span="3">
              <div class="picBox">
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="DetailsData.carFortyFive"
                    :preview-src-list="[DetailsData.carFortyFive]"
                  >
                  </el-image>
                  <span>车辆照片</span>
                </div>
                <div class="pic_item">
                  <el-image
                    class="pic"
                    :src="DetailsData.drivingLicence"
                    :preview-src-list="[DetailsData.drivingLicence]"
                  >
                  </el-image>
                  <span>行驶证照片</span>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="绑定司机">{{
              DetailsData.driverName ||'无'
            }}</el-descriptions-item>
            <el-descriptions-item label="加入车队">
              {{ DetailsData.isJoinFleet ? DetailsData.fleetName : "无" }}
            </el-descriptions-item>
            <el-descriptions-item label=" "></el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 审批进度 -->
      <div class="Approval">
        <div class="head">
          <i class="iconfontcolor icon-jindu"></i>
          <h3>审批进度</h3>
        </div>
        <div class="steps">
          <el-steps
            direction="vertical"
            v-for="item in DetailsData.auditVoList"
            :key="item.auditId"
          >
            <!-- 1 -->
            <el-step>
              <!-- 自定义图标 -->
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <!-- 自定义标题 -->
              <template slot="title">
                <div class="title">
                  <span class="name">{{ item.driverName }}</span>
                  <span class="promoter">发起人</span>
                  <span class="dateTime">{{ item.createTime }}</span>
                </div>
              </template>
              <!-- 自定义内容 -->
              <template slot="description">
                <div class="content">
                  <div>
                    <strong style="color: #1890ff">发起认证</strong>
                  </div>
                </div>
              </template>
            </el-step>
            <!-- 2 -->
            <template v-if="item.auditVoList[0].certStatus != 1">
              <el-step>
                <template slot="icon">
                  <div class="CircleDian"></div>
                </template>
                <!-- 自定义标题 -->

                <template slot="title">
                  <div class="title">
                    <span class="name">{{
                      item.auditVoList[0].auditUser
                    }}</span>
                    <span class="promoter">审批人</span>
                    <span class="dateTime">{{
                      item.auditVoList[0].auditTime
                    }}</span>
                  </div>
                </template>
                <!-- 自定义内容 -->
                <template slot="description">
                  <div class="content">
                    <div>
                      <div
                        style="color: #67c23a"
                        v-show="item.auditVoList[0].certStatus == 2"
                      >
                        通过
                      </div>
                      <div
                        style="color: #f5222d"
                        v-show="item.auditVoList[0].certStatus == 3"
                      >
                        不通过
                      </div>
                      <span v-show="item.auditVoList[0].certStatus == '3'"
                        >认证说明:
                        {{ item.auditVoList[0].auditFailReason }}</span
                      >
                    </div>
                  </div>
                </template>
              </el-step>
            </template>

            <el-step v-if="item.auditVoList[0].certStatus == 1">
              <template slot="icon">
                <div class="CircleDian"></div>
              </template>
              <template slot="title">
                <div class="waitAudit">待审核...</div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import NoPassBox from "@/components/NoPassBox.vue";
import store from "@/store/index";
import httpApi from "@/http";

export default {
  data() {
    return {
      showMessageBox: false,
      DetailsData: {},
      vehicleId: "",
    };
  },
  methods: {
    openMessageBox(params) {
      // true表示通过  false不通过
      this.showMessageBox = true;
      if (params) {
        this.$confirm("是否通过该车辆认证, 是否继续?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = {
              certStatus: "2",
              vehicleId: this.DetailsData.vehicleId,
            };
            // console.log('params', params);
            httpApi.vehicleApi.VehicleCertified(params).then((res) => {
              // console.log('通过结果', res);
              this.$message({
                type: "success",
                message: "认证通过!",
              });
              this.$router.go(-1);
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      } else if (!params) {
        const h = this.$createElement;

        this.$msgbox({
          title: "不通过",
          message: h("p", null, [h("NoPassBox", null, null)]),
          showCancelButton: true,
          showClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "NoPassMessageBox",
        })
          .then(() => {
            let params = {
              certStatus: "3",
              auditFailReason: store.state.illustrateValue,
              vehicleId: this.DetailsData.vehicleId,
            };
            // console.log('params', params);
            httpApi.vehicleApi.VehicleCertified(params).then((res) => {
              // console.log('不通过结果', res);
              this.init();
            });
            this.$message({
              type: "error",
              message: "认证不通过!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消",
            });
          });
      }
    },
    init() {
      this.vehicleId = this.$route.params.vehicleId;
      let params = { vehicleId: this.vehicleId };
      // console.log(params);
      httpApi.vehicleApi.getWaitAuditDetails2(params).then((res) => {
        // console.log('init', res);
        this.DetailsData = res.data.data;
        // console.log('审批进度', this.DetailsData.auditVoList);
        // console.log('shuju', this.DetailsData.auditVoList);

        // this.DetailsData.specification = JSON.parse(
        //   this.DetailsData.specification
        // );
        // this.DetailsData.specification.VehicleType = "";
        // this.DetailsData.specification.chexing.forEach((subItem, k) => {
        //   this.DetailsData.specification.VehicleType = subItem.style + "/";
        // });
        // this.DetailsData.specification.VehicleType =
        //   this.DetailsData.specification.VehicleType.substring(
        //     0,
        //     this.DetailsData.specification.VehicleType.length - 1
        //   );

        // this.DetailsData.specification.structure =
        //   this.DetailsData.specification.jiegou.name;
        // console.log('规格',this.DetailsData.specification);
      });
    },
  },
  mounted() {
    this.init();
  },
  components: {
    breadcrumb,
    NoPassBox,
  },
};
</script>

<style lang="scss" scoped>
.DetailsMain {
  height: calc(100% - 30px);
  min-width: 1012px;
  overflow-y: scroll;

  .header {
    height: 108px;
    width: 100%;

    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 14px;

    .stateBox {
      display: flex;
      align-items: center;

      .circle {
        background-color: #f3f7ff;
        width: 78.3px;
        height: 78.3px;
        border-radius: 50%;
        position: relative;
        margin-right: 16px;

        .iconState {
          font-size: 60px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      > .titleBox {
        > .title {
          color: #262626;
          font-size: 16px;
          margin-bottom: 11px;
          font-weight: bold;
          font-family: MicrosoftYaHei-Bold;
        }

        > .text {
          color: #939393;
          font-size: 12px;
        }
      }
    }

    .button_group {
      margin-left: auto;

      .notAdopt_btn {
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        height: 36px;
        width: 80px;
        color: #262626;
        font-size: 12px;
        background-color: #fff;
        margin-right: 14px;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          opacity: 0.8;
        }
      }

      .adopt_btn {
        transition: 0.2s;
        border-radius: 4px;
        height: 36px;
        width: 80px;
        font-size: 12px;
        background-color: #1890ff;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  // 车辆信息
  .carInfoBox {
    height: 388px;
    background: #fff;
    margin-bottom: 19px;

    > .head {
      display: flex;
      height: 49px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      padding: 0 31px;

      > .icon-xinxi {
        font-size: 18px;
        margin-right: 6px;
      }

      > h3 {
        color: #262626;
        font-size: 14px;
      }
    }

    .formBox {
      padding: 32px 30px 26px;
      margin: 0 auto;

      .descriptions {
        .paramsLaber {
          width: 20%;

          .paramsCotent {
            width: 80%;
          }
        }

        .picBox {
          display: flex;

          .pic_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 32px;

            .pic {
              width: 109px;
              height: 71px;
            }

            > span {
              color: #666666;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  // 审核进度
  .Approval {
    background-color: #fff;
    width: 100%;
    margin-bottom: 26px;

    > .head {
      display: flex;
      height: 49px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      padding: 0 31px;

      > .icon-jindu {
        font-size: 18px;
        margin-right: 6px;
      }

      > h3 {
        color: #262626;
        font-size: 14px;
      }
    }

    .steps {
      padding: 21px 32px;
      width: 100%;

      // 去组件默认样式
      ::v-deep .el-step__icon.is-text {
        border: none;
      }

      // 修改 连接线颜色
      ::v-deep .el-step.is-vertical .el-step__line {
        background-color: #1890ff;
        width: 2px;
      }

      .CircleDian {
        width: 10px;
        height: 10px;
        background: #1890ff;
        border-radius: 50%;
      }

      //发起人信息
      .title {
        font-size: 12px;
        align-items: center;
        display: flex;
        height: 24px;

        > .name {
          color: #262626;
          margin-right: 7px;
          font-weight: bold;
        }

        .promoter {
          color: #939393;
          margin-right: 7px;
        }

        > .dateTime {
          color: #939393;
        }
      }

      //审核内容
      .content {
        background-color: #fafafa;
        padding: 17px 18px 18px;
        width: 100%;
        font-size: 12px;
        margin: 0px 0 28px;
      }

      .waitAudit {
        font-size: 12px;
        font-weight: bold;
        color: #262626;
      }
    }
  }
}
</style>

<!-- 不带scope 才能修改弹窗的样式 -->

<style lang="scss">
.NoPassMessageBox {
  padding-bottom: 20px;

  .el-message-box__content {
    padding: 0 !important;
  }

  .el-message-box__title {
    font-size: 14px;
    color: #262626;
    font-weight: bold;
  }
}
</style>
